/**
 * Created by Administrator on 2017/4/7.
 */
import sel from '../../../../index.js';


export default {
  init: function () {
    sel.app.controller('api3C',['$scope','$stateParams','$state',
      function ($scope,$stateParams,$state) {
        $scope.title = 'Map';
        $scope.tip = 'ChinaMap';
        $scope.loading = '正在加载';
        d3.select('svg').remove();
        $scope.goBack = function () {
          $state.go('api.api2')
        };
        var zoom;
        if(!$stateParams.country){
          drawCountry('china');
        }else {
          $scope.tip = $stateParams.country;
          drawCountry($stateParams.country);
        };
        function drawCountry(country) {
          country = country.replace(/ /g,'');
          var url = '/api/'+country;
          sel.d3.json(url,function (data) {
            $scope.loading = '';

            if(!data){
              d3.select('.container').text('暂无地图');
              return
            }
            $scope.geography = data.data;
            ready($scope.geography);
             zoom = d3.zoom().on('zoom',function(){
              d3.select('.map').attr('transform',d3.event.transform);
            });
            d3.select('svg').style('background','lightblue').call(zoom);
          });
        }

        function ready(geography) {
          const margin = {top: 0, right: 0, bottom: 0, left: 0};
          const width = 960 - margin.left - margin.right;
          const height = 500 - margin.top - margin.bottom;
          const svg = d3.select('.container')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('class', 'map')
          ;
          var objs = {geometry:{coordinates:[[[116,40],[116.1,40.1]]],type:'Polygon'},type:"Feature",properties:'北京'};
          // var arr =(geography.features[0].geometry.coordinates[0][0].length == 2) ? geography.features[0].geometry.coordinates[0][0] : geography.features[0].geometry.coordinates[0][0][0];
          const projection = d3.geoRobinson()
          // .center(arr)
          .scale(850)
          ;
          var center = d3.geoCentroid(geography);
          console.log(center);
          projection.center(center);
          const path = d3.geoPath().projection(projection);

          var arr = path(objs);
          arr = arr.split('M')[1].split('Z')[0].split(',');
          svg.append('g').append('circle').attr("r",5).attr('fill','red').attr('cx',arr[0]).attr('cy',arr[1]);
          svg
          .append('g')
          .attr('class', 'countries')
          .selectAll('path')
          .data(geography.features)
          .enter()
          .append('path')
          .attr('d', path)
          .style('fill','white')
          .style('fill-opacity',0.8)
          .style('stroke','lightgray')
          .style('stroke-width', 1)
          .style('stroke-opacity', 0.5)
          .on('mouseover',function (d) {
            d3.select(this)
            .style('fill-opacity', 1)
            .style('stroke-opacity', 1)
            .style('stroke-width', 2)
            ;
            tip(d);
          })
          .on("mouseout",function () {
            d3.select('.tips').remove();
            d3.select(this)
            .style('fill-opacity', 0.8)
            .style('stroke-opacity', 0.5)
            .style('stroke-width', 1)
          })
          ;
        };


        function tip(data) {
          var x = d3.event.pageX + 10;
          var y = d3.event.pageY - 10;
          d3.select('body').append('div').attr('class','tips');
          d3.select('.tips')
          .style('top',y+'px').style('left', x+'px')
          .text(data.properties.name)
          .append('div')
          .text(data.properties.population ||'暂无统计');
        }






























      }])
  }
}